<template>
  <div>
    <!-- <h1>   - - - - - - - 我是垃圾分类页面- - - - - - -  </h1> -->
      <input type="text" v-model="msg" placeholder="根据垃圾名查垃圾分类" @keyup.enter="search">

      <div class="search_msg ex">
        <span>垃圾名</span>
        <span> </span>
        <span>垃圾类别</span>
      </div>

      <div class="search_msg">
        <span>{{this.search_msg.goodsName}}</span>
        <span> - </span>
        <span>{{this.search_msg.goodsType}}</span>
      </div>

      <h3>其他相关内容：</h3>

      <div class="search_msg" v-for="item in relate_msg" :key="item.index">
        <span>{{item.goodsName}}</span>
        <span> - </span>
        <span>{{item.goodsType}}</span>
      </div>
    
  </div>
</template>


<script>

export default {
  data() {
    return {
      search_msg:{
        goodsName:'西瓜',
        goodsType:'湿垃圾'
      },
      msg:'',
      relate_msg:[
        {
          goodsName:'西瓜',
          goodsType:'湿垃圾'
        }
      ]


    }
  },
  methods: {
    search(){
      if(this.msg!==''){
        console.log('----------9999999999999')
        this.$axios.get('https://www.mxnzp.com/api/rubbish/type?name='+this.msg).then(
          (res)=>{
              if(res.data.code===1){
                console.log(this.search_msg)
              this.msg = ''
              console.log('-------------0000000000000000000')
              console.log(res.data)
              this.search_msg = res.data.data.aim
              this.relate_msg = res.data.data.recommendList
              }else if(res.data.code===0){
                this.msg = ''
                this.$toast('没有查到相关内容，请重新输入～～')
              }
                
          }
        )
        
      }else{
        this.$toast('请输入要查询的内容～～')
      }
    }

  }
};

</script>

<style lang="less" scoped>

input{
  display: block;
  width: 80%;
  line-height: 35px;
  font-size: 16px;
  margin: 20px auto;
  border-radius: 25px;
  border-color: #aaa;
  color:#555;
  letter-spacing: 2px;
  &:focus{
    border-color: #7F89FF;
  }
  -webkit-appearance: none;
  text-indent: 12px;
}

h3{
  font-size: 18px;
  color: #444;
  margin: 20px auto;
  width: 80%;
  font-weight: 300;
}

.search_msg{
  background-color: #efefef;
  border-radius: 10px;
  width: 80%;
  margin: 10px auto;
  color: #333;
  font-size: 15px;
  padding: 5px 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  &.ex{
    background-color: transparent;
    font-size: 16px;
    font-weight: 700;
  }
}


</style>
